vue element 使用el |
您所在的位置：网站首页 › element ui 按钮 › vue element 使用el |
vue element 使用el
|
环境：
vue:2.5.16element-ui:2.3.4
效果图：
缩小后的样子：
放大后的样子
el-dialog本身只支持标题栏右上角有关闭按钮，故需要使用slot="title" 重写覆盖原本的标题栏。 除了这个查询了下官方API文档，其他都是简单的逻辑代码而已。 组件代码： 示例图 示例图 export default { data() { return { isMiniSize:false,//是否最小化了，默认为否 dialogWidth:'37%',//动态设置dialog宽度 } }, methods: { // 放大或者缩小 miniSize() { this.isMiniSize = !this.isMiniSize; if(this.isMiniSize){ this.dialogWidth = '12%'; } else{ this.dialogWidth = '37%'; } }, // 关闭弹窗 close() { //强制触发父组件的事件来关闭dialog this.$emit('closeDialog') /* 父组件中调动如下： 1.父组件调用子组件： 2.父组件方法： closeHandle () { this.isShowDialog = false // 控制取消和X按钮，关闭弹窗 } */ }, }, }; .big-and-small-view { overflow-y: scroll; position: relative; } /* 弹窗header相关样式 */ .DialogClass dialog-header { width: 100%; height: 100%; display: flex; justify-content: space-between; cursor: auto; } .DialogClass dialog-header .div{ flex: 1; } .DialogClass .left-title{ margin-top: 3px; } .DialogClass .left-title .span{ text-align: left; font-size: 16px; color: #000000; } .DialogClass .icons{ display: flex; justify-content: flex-end; } .DialogClass .icons .i{ color: #000000; display: block; padding: 3px; } .DialogClass .icons .i:hover{ background: #dcdfe6; cursor: pointer; }
|
【本文地址】
今日新闻 |
推荐新闻 |